<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js 教学</title>
    <link href="./css/style.css" rel="stylesheet">
    <script> scr="./js/index.js"</script>
</head>
<body>
    <form action="">
        <input type="text" id="nameInput">
        <input type="password" id="pswdInput">
        <input type="button" value="验证" onclick="yanzheng()">
        <h2 id="messageUI"></h2>
    </form>

    <script>
        let i = 1;

        function yanzheng() {
            let nameInput = document.getElementById("nameInput");
            if (nameInput.value.length < 5) {
                if (i > 3) {
                    alert("已经过了3次机会了");
                    return;
                }
                if (i == 1) {
                    document.getElementById("messageUI").style.backgroundColor = "green";
                } else if (i == 2) {
                    document.getElementById("messageUI").style.backgroundColor = "yellow";
                } else if (i == 3) {
                    document.getElementById("messageUI").style.backgroundColor = "blue";
                }
                document.getElementById("messageUI").textContent = "用户名不能小于5,你还有" + (3 - i) + "次机会";
                document.getElementById("messageUI").style.color = "red";
                document.getElementById("messageUI").style.fontSize = "20px";
                document.getElementById("messageUI").style.fontFamily = "华文行楷";

                i++;
            } else {
                document.getElementById("messageUI").textContent = "";
            }
        }
    </script>
    <body>
        <form action="">
            <input type="text" id="nameInput">
            <input type="password" id="pswdInput">
            <input type="button" value="验证" onclick="yanzheng()">
            <h2 id="messageUI"></h2>
        </form>
    </body>
</body>
</html>